<template>
  <el-dialog
    v-if="load"
    title="选择供应商"
    v-model="visible"
    align-center
    width="800px"
    @close="handleClose"
    :z-index="2000"
  >
    <div class="flex flex-wrap gap-[8px] mb-4">
      <el-input
        v-model.trim="form.supplier_name"
        class="w-40"
        placeholder="供应商名称"
        clearable
      ></el-input>
      <el-input
        v-model.trim="form.supplier_code_new"
        class="w-40"
        placeholder="供应商代码"
        clearable
      ></el-input>
      <el-button class="ml-auto m-0" type="primary" @click="handleSearch()"
        >查询</el-button
      >
      <el-button class="!ml-0" @click="handleReset()">重置</el-button>
    </div>
    <vxe-table ref="tableRef" :data="tableData" height="500">
      <vxe-column type="radio" width="60"></vxe-column>
      <vxe-column field="supplier_name" title="供应商名称">
        <template #default="{ row }">
          <dataAuthority
            auth="supplier_name"
            :value="row.supplier_name"
            :default_value="row.supplier_code"
          ></dataAuthority>
        </template>
      </vxe-column>

      <vxe-column field="is_temporary" title="供应商类型">
        <template #default="{ row }">
          <div>{{ row.is_temporary == 1 ? "临时供应商" : "合作供应商" }}</div>
        </template>
      </vxe-column>
      <vxe-column field="purchase_type_name" title="采购类型"> </vxe-column>
    </vxe-table>
    <div>
      <vxe-pager
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[10, 20, 100]"
        @page-change="pageChange"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'Jump',
          'PageCount',
          'NextPage',
          'NextJump',
          'Sizes',
          'Total',
        ]"
      >
      </vxe-pager>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="jsx" setup>
import { getSupplierList } from "@/api/index.js";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
let loadings = reactive({});
const emit = defineEmits(["close", "selectSupplier"]);
let select = ref({});

const data = reactive({
  visible: false,
  load: false,
  tableData: [],
  form: {},
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  },
});

const { visible, load, tableData, form, page } = toRefs(data);

const getList = async () => {
  const formData = {
    ...page.value,
  };

  const res = await getSupplierList({ ...formData, ...form.value });
  tableData.value = res.data;
  page.value.total = res.total;
};

const handleSearch = () => {
  getList();
};

const handleReset = () => {
  form.value = {};
  getList();
};

const pageChange = (val) => {
  page.value.pageNum = val.currentPage;
  page.value.pageSize = val.pageSize;
  getList();
};
// 打开弹窗
const open = async (selection) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  select.value = {};
  loadings = reactive({});
  visible.value = true;
  getList();
};

//获取已选中的行
const tableRef = ref();
const getSelectRow = () => {
  const $table = tableRef.value;
  if ($table) {
    return $table.getRadioRecord();
  }
};

// 关闭弹窗
const close = () => {
  visible.value = false;
};

const handleClose = () => {
  emit("close");
};
// 提交
const submit = () => {
  const selectRow = getSelectRow();
  console.log(selectRow);
  if (!selectRow.s_id) return ElMessage.error("请选择供应商");
  selectRow.is_temporary = `${selectRow.is_temporary}`;
  emit("selectSupplier", selectRow);
  close();
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
:deep(.vxe-cell--radio) {
  font-size: 20px !important;
}
</style>
